<template>
  <el-dialog
    class="public-dialog"
    title="警告配置"
    width="600"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <VForm
        ref="form"
        :model="model"
        :fieldList="fieldList"
        :options="formOption"
        :rules="rules"
        :disabled="disabled"
        :originOption="optionsData"
      >
        <template #warning_total_weight-slot>
          <div class="ml-[4px] text-[#0a1431] leading-[20px] text-[14px]">
            绝对值范围
          </div>
          <div
            class="flex items-center text-[12px] text-[#999] leading-[17px] mt-[4px]"
          >
            <div class="flex items-start">
              <SvgIcon icon-class="HintFilled"/>
              填写后账单重量与系统重量差异的值（绝对值）超出填写的数值后为警告；无超出则为匹配成功
            </div>
          </div>
        </template>
        <template #warning_boxes_weight-slot>
          <div class="ml-[4px] text-[#0a1431] leading-[20px] text-[14px]">
            绝对值范围
          </div>
          <div
            class="flex items-center text-[12px] text-[#999] leading-[17px] mt-[4px]"
          >
            <div>
              <SvgIcon icon-class="HintFilled"/>
              填写后账单重量/箱数与系统的箱重量差异的值（绝对值）超出填写的数值后为警告；无超出则为匹配成功
            </div>
          </div>
        </template>
        <template #warning_weight_type-slot>
          <div class="text-[12px] leading-[17px] text-[#e50113]">
            计费重平均差异=物流账单中的计费重与仓库计费重的差异/箱数
          </div>
        </template>
        <template #total_weight-slot>
          <div class="ml-[4px] text-[#0a1431] leading-[20px] text-[14px]">
            绝对值范围
          </div>
          <div
            class="flex items-center text-[12px] text-[#999] leading-[17px] mt-[4px]"
          >
            <div>
              <SvgIcon icon-class="HintFilled"/>
              填写后账单重量与系统重量差异的值（绝对值）超出填写的数值后为警告；无超出则为匹配成功
            </div>
          </div>
        </template>
        <template #warning_avg_diff-slot>
          <div class="ml-[4px] text-[#0a1431] leading-[20px] text-[14px]">
            绝对值范围
          </div>
          <div
            class="flex items-center text-[12px] text-[#999] leading-[17px] mt-[4px]"
          >
            <div>
              <SvgIcon icon-class="HintFilled"/>
              提示：填写后差异重量/账单导入的件数的值超出填写的数值后为警告；无超出则为匹配成功
            </div>
          </div>
        </template>
      </VForm>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ElMessage } from "element-plus";
import VForm from "@/components/Form/index.vue";
import { warningConfig, setWarningConfig } from "../../api";
const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  type: { type: String, default: "postCode" },
  optionsData: { type: Object, default: () => ({}) },
});
const { optionsData } = toRefs(props);
const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const formOption = {
  labelPosition: "top",
  inline: true,
};

const rules = {
  warning_amount: [
    { required: true, message: "请输入警告金额", trigger: "blur" },
  ],
  warning_weight_type: [
    { required: true, message: "请选择警告重量", trigger: "blur" },
  ],
  warning_total_weight: [
    { required: true, message: "请输入总重量", trigger: "blur" },
  ],
  warning_boxes_weight: [
    { required: true, message: "请输入箱重量", trigger: "blur" },
  ],
  warning_avg_diff: [
    { required: true, message: "请输入平均差异", trigger: "blur" },
  ],
};

const form = ref();
const model = ref({});
const loading = ref();

const fieldList = [
  {
    field: "warning_amount",
    label: "警告金额",
    type: "inputNumber",
    min: 0,
    max: 9999999999,
  },
  {
    field: "warning_weight_type",
    label: "警告重量",
    type: "radio",
    originField: "finance_initial_bill_warning_weight_type",
    style: { width: "100%" },
  },
  {
    field: "warning_total_weight",
    label: "总重量",
    type: "inputNumber",
    min: 0,
    max: 9999999999,
    show: ({ model }) => model.warning_weight_type !== 1,
    style: { width: "100%" },
  },
  {
    field: "warning_boxes_weight",
    label: "箱重量",
    type: "inputNumber",
    min: 0,
    max: 9999999999,
    show: ({ model }) => model.warning_weight_type == 1,
  },
  {
    field: "warning_avg_diff",
    label: "平均差异",
    type: "inputNumber",
    min: 0,
    max: 9999999999,
    show: ({ model }) => model.warning_weight_type == 3,
  },
];

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      nextTick(() => {
        getDetail();
      });
    }
  }
);

const getDetail = async () => {
  try {
    const { type } = props;
    const { data } = await warningConfig({});
    model.value = Object.assign({
      ...data,
    });
  } catch (e) {
    console.error(e);
  }
};

const handleSave = async () => {
  try {
    const formInfo = await form.value.submit();

    const { code, message } = await setWarningConfig({
      ...formInfo,
    });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    ElMessage.success("保存成功");
    handleClose(true);
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  model.value = {};
  await nextTick();
  form.value.resetForm();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
